<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/resource/css/main.css" />
    <style type="text/css">
        td {
            border: solid grey 1px;
        }
    </style>

    <script type="text/javascript" src="/resource/script/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var selMaster = $("#selMaster");
            var selSalve = $("#selSalve");

            selMaster.change(function () {
                if($(this).val() > 0){
                    $.post("/shop/name/list",
                        {
                            shopId:$(this).val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    selSalve.removeAttr("disabled");
                                    selSalve.html(data.nameList);
                                }
                                else {
                                    alert(data.errorMsg);
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                            }
                        }
                    );
                }
                else {
                    selSalve.attr("disabled", "disabled");
                    selSalve.html("<option value ='0'> -- 未选择 -- </option>");
                }
            });

            $("#btnSubmit").click(function(){
                var shopId = selSalve.val();
                if (shopId == "0"){
                    alert("请选择门店!");
                }
                else {
                    $("#trTitle").nextAll().each(function(){
                        $(this).remove();
                    });
                    $.post("/income/data",
                        {
                            year:$("#selYear").val(),
                            month:$("#selMonth").val(),
                            shopId:selSalve.val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    $("#trTitle").after(data.incomeData);
                                }
                                else {
                                    alert(data.errorMsg);
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                            }
                        }
                    );
                }
            });
        });
    </script>
</head>
<body>
<div style="margin: 20px;">
    年：
    <select id="selYear">
        <option value ="2015">2015</option>
    </select>
    月：
    <select id="selMonth">
        <option value ="01">1</option>
        <option value ="02">2</option>
        <option value ="03">3</option>
        <option value ="04">4</option>
        <option value ="05">5</option>
        <option value ="06">6</option>
        <option value ="07">7</option>
        <option value ="08">8</option>
        <option value ="09">9</option>
        <option value ="10">10</option>
        <option value ="11">11</option>
        <option value ="12">12</option>
    </select>

    选择品牌：
    <select id="selMaster">
        <option value ="0"> -- 未选择 -- </option>
        <c:forEach items="${masterShopNameList}" var="nameItem">
            <option value ='<c:out value="${nameItem.id}" />'><c:out value="${nameItem.name}" /></option>
        </c:forEach>
    </select>

    选择分店：
    <select id="selSalve" disabled="disabled">
        <option value ="0"> -- 未选择 -- </option>
    </select>

    <input id="btnSubmit" type="button" value="确定" />
</div>
<div>
    <table id="tIncomeInfo" style=" border: solid grey 1px; margin-top: 30px;">
        <tr id="trTitle">
            <td width="100px">日期</td>
            <td width="150px">订单总金额</td>
            <td width="150px">真实收入</td>
            <td width="150px">优惠劵抵消</td>
        </tr>
    </table>
</div>
</body>
</html>